<template>
  <div class="p-saine-search">
    <h1>The Power of <span>&nbsp;AI&nbsp;</span> Technology</h1>
    <div class="search-content">
      <img :src="scanIcon" @click="handleScan" />
      <input placeholder="请输入证书编号查询" v-model="sarineNumber"  maxlength="10" />
      <img class="search-icon" :src="searchIcon" @click="handleSearch"/>
    </div>
    <div class="diamond-wrapper">
      <img :src="diamondIcon" alt="" />
    </div>
    <div class="bottom-wrapper">
      <div class="left">
        <img :src="logoIcon"/>  
      </div>  
      <div class="right">
        <span>Sarine Lab</span>  
        <span>全球首家人工智能钻石实验室</span>  
        <span>The first ever AI Technology-based Grading Lab </span>  
      </div>  
    </div>
  </div>
</template>

<script>

  // import axios from 'axios'

  export default {
    data(){
      return {
        scanIcon: require('../../static/images/icon-scan.png'),
        searchIcon: require('../../static/images/icon-search.png'),
        diamondIcon: require('../../static/images/diamond.png'),
        logoIcon: require('../../static/images/logo.png'),
        sarineNumber: '',
      }
    },
    methods: {
      handleSearch(){
        if (this.sarineNumber.length == 10) {
          this.sarineNumber = this.sarineNumber.toLocaleUpperCase()
          window.location.href = `http://www.sarine.com?SN=${this.sarineNumber}`
        }else {
          alert("请输入正确的证书编号")
        }
      },
      async handleScan(){

        try {
          this.$axios.defaults.baseURL = 'http://sarine.eweiwei.com'
          let data = await this.$axios.get('/get-signature', {
            params: { url: location.href }
          })
          data = data.data.data
          wx.config({
              debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              appId: data.appId, // 必填，公众号的唯一标识
              timestamp: data.timestamp, // 必填，生成签名的时间戳
              nonceStr: data.nonceStr, // 必填，生成签名的随机串
              signature: data.signature,// 必填，签名，见附录1
              jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          })

          wx.ready(function () {
            wx.scanQRCode({
                needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
                success: function (res) {
                    // var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                }
            });
          })
  
          console.log('====================================');
          console.log(data);
          console.log('====================================');
        } catch (error) {
          console.log('====================================');
          console.log(error);
          console.log('====================================');
        }

      }
    }
  }
</script>

<style lang="scss" scoped>

  @import '~assets/scss/index.scss';

  .p-saine-search{
    background-image: url('~static/images/search-bg.png');
    background-position: center;
    background-size: cover;
    height: 100%;
    position: relative;

    h1 {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: px2rem(50px);
      padding-top: px2rem(257px);
      span{
        font-weight: bold;
      }
    }

    .search-content{
      background-color: #fff;
      height: px2rem(70px);
      padding: px2rem(10px);
      box-sizing: border-box;
      display: flex;
      margin: 0 px2rem(52px);
      margin-top: px2rem(168px);
      img{
        width: px2rem(50px);
        height: px2rem(50px);
        &.search-icon{
          width: px2rem(45px);
          cursor: pointer;
        }
      }
      input {
        flex: 1;
        height: 100%;
        text-align: center;
        border: none;
        padding: 0 px2rem(10px);
        font-size: px2rem(26px);
        color: #8e8e8e;
        outline: none;
      }
    }

    .diamond-wrapper{
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: px2rem(100px);
      img {
        width: px2rem(512px);
      }
    }

    .bottom-wrapper{
      display: flex;
      align-items: center;
      padding-left: px2rem(36px);
      padding-right: px2rem(50px);
      position: absolute;
      bottom: px2rem(40px);
      left: 0;
      right: 0;
      .left {
        img {
          width: px2rem(145px);
          height: px2rem(145px);
        }
      }
      .right {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin-left: px2rem(5px);
        span {
          color: #fff;
          font-size: px2rem(24px);
          font-weight: normal;
          line-height: px2rem(46px);
          &:first-child {
            font-size: px2rem(28px);
            font-weight: bold;
          }
        }
      }
    }
  }
</style>

